<template>
  <div class="container" ref="top">
    <navbar title="限时福利"
            rightItemIcon="true"
            :rightHidden="true"
            @rightItemClick="showShare"
            theme="transparent-full-light">
    </navbar>
    <div ref="top"></div>
    <list class="item-list-container">
      <page-refresh v-on:refresh="onXRefresh" v-on:pullingDown="onPullingDown" :refreshing="refreshing"
                    :indicatorScale="indicatorScale"></page-refresh>
      <cell v-if="remainSeconds > 0">
        <div class="countdown-container">
          <time-countdown :seconds.sync="remainSeconds"  style="margin-top: 10;"></time-countdown>
        </div>
      </cell>
      <cell>
        <div class="step-info">
          <div class="step-item">
            <text class="step-item-n">①</text>
            <text class="step-item-title">点立即抢</text>
          </div>
          <text class="step-split">---</text>
          <div class="step-item">
            <text class="step-item-n">②</text>
            <text class="step-item-title">完成购买</text>
          </div>
          <text class="step-split">---</text>
          <div class="step-item">
            <text class="step-item-n">③</text>
            <text class="step-item-title">确认收货</text>
          </div>
          <text class="step-split">---</text>
          <div class="step-item">
            <text class="step-item-n">④</text>
            <text class="step-item-title">结算退回</text>
          </div>
        </div>
      </cell>
      <cell v-for="(fsi, idx) in flashSaleItemList" v-bind:key="idx">
        <div class="fsi-info">
          <image :src="fsi.item.picUrl" class="fsi-pic" resize="contain"></image>
          <div class="fsi-details">
            <div class="fsi-title" v-if="!fsi.slogan">
              <image :src="platformIcon(fsi.item.ecomPlat)" class="fsi-title-icon"></image>
              <text class="fsi-title-text">     {{fsi.item.title}}</text>
            </div>
            <div>
              <text class="fsi-slogan" v-if="fsi.slogan">{{fsi.slogan}}</text>
            </div>
            <div>
              <text class="fsi-user-level" v-if="fsi.userLevel">{{fsi.userLevelTitle}}专享</text>
            </div>
            <progress-bar v-if="fsi.remainSeconds <= 0" :width="300" :text="((fsi.drawnNum / fsi.totalNum) * 100).toFixed(0) + '%'"
                          :value="(fsi.drawnNum) / fsi.totalNum"></progress-bar>
            <div style="display: flex; flex-direction: row; justify-content: space-between">
              <div>
                <div class="fsi-row">
                  <div class="fsi-price-wrapper">
                    <text class="fsi-price">¥{{(fsi.item.price).toFixed(1)}}  </text>
                    <text class="fsi-price-tip">抢购价</text>
                  </div>
                </div>
                <div class="fsi-row">
                  <text class="fsi-price fsi-price-origin">¥{{fsi.item.originPrice}}</text>
                  <text class="fsi-price-tip"> 结算退{{fsi.returnFee.toFixed(1)}}元</text>
                </div>
              </div>
              <div class="fsi-draw">
                <template v-if="fsi.remainSeconds > 0">
                  <text class="fsi-draw-text"  v-if="fsi.userRemind" @click="exitRemind(idx)">已提醒</text>
                  <text class="fsi-draw-text" v-else @click="joinRemind(idx)">提醒我</text>
                  <text class="fsi-draw-btn fsi-draw-btn-notice" @click="joinRemind(idx)">{{fsi.startTip}}</text>
                </template>
                <template v-else>
                  <text class="fsi-draw-btn" @click="draw(idx)" v-if="!fsi.drawn">立即抢</text>
                  <text class="fsi-draw-btn fsi-draw-btn-drawn" @click="draw(idx)"  v-else>已抢单</text>
                </template>
              </div>
            </div>
          </div>
          <text class="fsi-label">{{fsi.label || ''}}</text>
        </div>
      </cell>
      <cell>
        <page-notice msg="抱歉，什么都木有找到～" :icon="sorryIcon" v-if="!flashSaleItemList.length && !hasNext"></page-notice>
      </cell>
      <cell>
        <div class="finished-head">
          <div class="finished-line"></div>
          <text class="finished-title">今日已抢完</text>
          <div class="finished-line"></div>
        </div>
      </cell>
      <cell v-for="(fsi, idx) in finishedList" v-bind:key="idx">
        <div class="fsi-info">
          <image :src="fsi.item.picUrl" class="fsi-pic" resize="contain"></image>
          <div class="fsi-details">
            <div class="fsi-title" v-if="!fsi.slogan">
              <image :src="platformIcon(fsi.item.ecomPlat)" class="fsi-title-icon"></image>
              <text class="fsi-title-text">     {{fsi.item.title}}</text>
            </div>
            <div>
              <text class="fsi-slogan" v-if="fsi.slogan">{{fsi.slogan}}</text>
            </div>
            <div>
            </div>
            <div style="display: flex; flex-direction: row; justify-content: space-between">
              <div>
                <div class="fsi-row">
                  <div class="fsi-price-wrapper">
                    <text class="fsi-price">¥{{(fsi.item.price - fsi.returnFee).toFixed(1)}}  </text>
                    <text class="fsi-price-tip">实际支付</text>
                  </div>
                </div>
                <div class="fsi-row">
                  <text class="fsi-price fsi-price-origin">¥{{fsi.item.originPrice}}</text>
                </div>
              </div>
              <div class="fsi-draw">
                <text class="fsi-draw-btn fsi-draw-btn-drawn">已抢完</text>
              </div>
            </div>
          </div>
          <text class="fsi-label">{{fsi.label || ''}}</text>
        </div>
      </cell>
      <cell v-if="flashSaleSetting.rules && flashSaleSetting.rules.length > 0">
        <div class="rules">
          <text class="rules-title">活动规则</text>
          <div class="rules-row" v-for="(rule, idx) in flashSaleSetting.rules.split(/\n/g)" v-bind:key="rule" v-if="rule">
            <text class="rules-row-n">{{idx + 1}}.</text>
            <text class="rules-row-txt">{{rule}}</text>
          </div>
        </div>
      </cell>
      <cell>
        <div style="padding-bottom: 130px;"></div>
      </cell>
    </list>
    <wxc-loading :show="loadingShow"></wxc-loading>
    <div class="btn-bottom-share">
      <text class="btn btn-primary btn-large icon" style="flex: 1" @click="showShare()">立即送好友0元福利 &#xe8c6;</text>
    </div>
    <flash-sale-item-draw ref="flashSaleItemDraw"></flash-sale-item-draw>
    <page-scrolltop :shown="pageScrollTopShown" @click="gotoTop"></page-scrolltop>
    <wxc-popup popup-color="#fff"
               :show="shareBarPopupShow"
               @wxcPopupOverlayClicked="shareBarPopupOverlayClick"
               pos="bottom"
               height="190">
      <div class="share-btns">
        <div class="share-btn">
          <text class="share-btn-icon btn-wx icon activeable" v-if="!iosHide" @click="share('pyq')">&#xe628;</text>
          <text class="share-btn-text">朋友圈</text>
        </div>
        <div class="share-btn">
          <text class="share-btn-icon btn-wx icon activeable" v-if="!iosHide" @click="share('wxhy')">&#xe66a;</text>
          <text class="share-btn-text">微信好友</text>
        </div>
      </div>
    </wxc-popup>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/utilities";
  @import "./sass/icon";
  @import "./sass/buttons";
  .container {
    background-color: #cb041b;
    padding: 10px;
    transition: transform .3s linear;
  }

  .rules {
    padding: 20px 50px;
    &-title {
      font-size: 32px;
      padding: 20px;
      text-align: center;
      color: rgba(255, 255, 255, 0.75);
    }
    &-row {
      display: flex;
      flex-direction: row;
      /*align-items: center;*/
      justify-content: flex-start;
      padding-bottom: 15px;
      &-n {
        color: rgba(255, 255, 255, 0.75);
        font-size: 28px;
        font-weight: 300;
        padding-right: 10px;
      }
      &-txt {
        color: rgba(255, 255, 255, 0.75);
        font-size: 28px;
        font-weight: 300;
        line-height: 35px;
        flex: 1;
      }
    }
  }
  .btn-bottom-share {
    position: fixed;
    bottom: 0px;
    width: 750px;
    align-items: center;
    padding: 20px 50px;
    flex-direction: row;
  }
  .item-list-container {
    /*background-color: #FFFFFF;*/
    /*padding: 20;*/
  }

  .finished {
    &-head {
      margin: 50px 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      height: 50px;
    }
    &-line {
      height: 1px;
      background-color: #ffffff;
      width: 200px;
    }
    &-title {
      font-size: 32px;
      font-weight: 300;
      color: #ffffff;
      margin: 0 20px;
    }
  }

  .countdown-container {
    padding: 10px;
  }

  .step {
    &-info {
      display: flex;
      flex-direction: row;
      height: 200px;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
    }
    &-item {
      flex: 1;
      flex-direction: column;
      display: flex;
      align-items: center;
      &-title {
        font-size: 28px;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
      }
      &-n {
        font-weight: 100;
        font-size: 58px;
        height: 80px;
        color: #ffffff;
        text-align: center
      }
    }
    &-split {
      font-size: 28px;
      width: 84px;
      text-align: center;
      color: #ffffff;
    }
  }

  .share-btns {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
  }

  .share-btn {
    flex: 1;
    justify-content: center;
    align-items: center;
    &-icon {
      font-size: 60px;
      color: #ffffff;
      text-align: center;
      width: 100px;
      height: 100px;
      border-radius: 100px;
      line-height: 100px;
    }
    &-text {
      color: $color;
      margin-top: 10px;
      font-size: 28px;
    }
  }

  .btn-wx {
    background-color: #1FCB28;
  }

  .btn-qq {
    background-color: #43B1E9;
  }

  .btn-img {
    background-color: #A98264;
  }

  .btn-copy {
    background-color: $brand-warning;
  }

  .fsi {
    &-info {
      flex-direction: row;
      background-color: #ffffff;
      align-items: stretch;
      margin: 10px;
      padding: 10px;
      border-radius: 6px;
      margin-bottom: 10px;
      height: 230px;
      position: relative;
    }
    &-label {
      flex-direction: row;
      justify-content: space-between;
      padding: 5px 10px;
      align-items: center;
      position: absolute;
      color: #ffffff;
      font-size: 28px;
      top: 5px;
      left: 5px;
      background-color: $brand-primary;
      border-bottom-left-radius: 20px;
      border-top-right-radius: 20px;
    }
    &-user-level {
      font-size: 24px;
      color: $color-warning;
      margin-bottom: 10px;
    }
    &-draw {
      display: flex;
      justify-content: center;
      align-items: center;
      &-text {
        font-size: 24px;
        color: $color-warning;
        margin-bottom: 10px;
      }
      &-btn {
        &:active {
          opacity: .5;
        }
        opacity: 1;
        height: 50px;
        line-height: 50px;
        border-radius: 50px;
        padding: 0 30px;
        font-size: 26px;
        background-color: $brand-primary;
        color: #fff;
        &-notice {
          background-color: $brand-warning;
        }
        &-noticed {
          background-color: #fff;
          color: $color-warning;
          @include border(1px, solid, #ddd)
        }
        &-drawn {
          background-color: #fff;
          color: $color-success;
          @include border(1px, solid, #ddd)
        }
      }
    }
    &-title {
      position: relative;
      &-text {
        font-size: 28px;
        color: $color;
        line-height: 32px;
        lines: 3;
        text-overflow: ellipsis;
        overflow: hidden;
        height: 32px;
      }

      &-icon {
        width: 32px;
        height: 32px;
        position: absolute;
        top: 0;
        left: 0;
      }
      text-overflow: ellipsis;
    }
    &-slogan {
      font-size: 32px;
      color: $color-warning;
      margin-bottom: 20px;
    }
    &-pic {
      width: 200px;
      height: 200px;
    }
    &-details {
      margin-left: 20px;
      flex: 1;
      justify-content: space-between;
    }
    &-commission {
      color: $color-primary;
      font-size: 26px;
      margin-bottom: 20px;
    }
    &-row {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    &-price {
      font-size: 40px;
      color: $color-primary;
      &-tip {
        font-size: 24px;
        color: $color-orange;
        padding-bottom: 5px;
      }
      &-origin {
        color: $color-muted;
        font-size: 28px;
        text-decoration: line-through;
        margin-bottom: 5px;
      }
      &-wrapper {
        flex-direction: row;
        align-items: flex-end;
      }
    }
  }

</style>
<script>

import { WxcLoading, WxcPopup } from 'weex-ui'
let api = require('./include/api')
let Deferred = require('Deferred')
require('./include/page-xdom')
let modal = weex.requireModule('modal')
let navigator = require('./include/xnavigator')
let urlPath = require('./include/url-path')
let dom = weex.requireModule('dom')
module.exports = {
  mixins: [
    require('./mixin/page-refresh'),
    require('./mixin/page-loading-more'),
    require('./mixin/page-scrolltop')
  ],
  components: {
    'page-notice': require('./components/page-notice.vue'),
    navbar: require('./components/navbar.vue'),
    'flash-sale-item-list': require('./components/flash-sale-item-list.vue'),
    coupon: require('./components/coupon.vue'),
    'progress-bar': require('./components/progressbar.vue'),
    'time-countdown': require('./components/time-countdown.vue'),
    WxcLoading,
    FlashSaleItemDraw: require('./components/flash-sale-item-draw.vue'),
    WxcPopup
  },
  data () {
    return {
      flashSaleItemList: [],
      refreshing: false,
      refreshIndicatorScale: 0.2,
      sorryIcon: 'images/aiya.png',
      loadingShow: true,
      hasNext: true,
      containerStyle: {},
      searchParam: {},
      remainSeconds: 0,
      shareBarPopupShow: false,
      iosShow: false,
      flashSaleSetting: {},
      finishedList: []
    }
  },
  created () {
    this.loadData()
    this.search().done(() => {
      this.loadingShow = false
    })
  },
  methods: {
    loadData() {
      api.page.flashSale.data().then(rs => {
        this.flashSaleSetting = rs.data.flashSaleSetting
        this.finishedList = rs.data.finishedList
      })
    },
    showShare () {
      this.shareBarPopupShow = true
    },
    share (to) {
      const { shareText, shareTitle, shareDescription, shareThumbUrl, shareUrl } = this.flashSaleSetting
      let clipboard = weex.requireModule('clipboard')
      clipboard.setString(shareText)
      modal.toast({message: '文案已复制到剪贴板', duration: 0.5})
      let weixinApi = weex.requireModule('weixinApi')
      let scene
      switch (to) {
        case 'pyq':
          scene = 1
          break
        case 'wxhy':
          scene = 0
          break
      }
      if (weixinApi.sendWebpage) {
        const thumbUrl = shareThumbUrl
        setTimeout(() => {
          const params = {
            url: shareUrl,
            title: shareTitle,
            description: shareDescription,
            thumbUrl: thumbUrl,
            scene: scene
          }
          weixinApi.sendWebpage(params)
        }, 100)
      }
    },
    shareBarPopupOverlayClick () {
      this.shareBarPopupShow = false
    },
    exitRemind (idx) {
      const fsi = this.flashSaleItemList[idx]
      api.flashSaleRemind.exit({
        flashSaleItemId: fsi.id
      }).done(rs => {
        if (rs.success) {
          fsi.userRemind = false
          this.$set(this.flashSaleItemList, idx, fsi)
        }
      })
    },
    draw (idx) {
      const fsi = this.flashSaleItemList[idx]
      this.$refs.flashSaleItemDraw.show(fsi.id, (data) => {
        fsi.drawn = data
        this.$set(this.flashSaleItemList, idx, fsi)
      })
    },
    joinRemind (idx) {
      const fsi = this.flashSaleItemList[idx]
      api.flashSaleRemind.join({
        flashSaleItemId: fsi.id
      }).done(rs => {
        if (rs.success) {
          fsi.userRemind = true
          this.$set(this.flashSaleItemList, idx, fsi)
        }
      })
    },
    showStartDate (date) {
      date = Date.parse(date)
      return '今日'
    },
    resetSearchParam () {
      this.searchParam.page = 1
      this.hasNext = false
    },
    search (append) {
      return api.flashSaleItem.search(this.searchParam).done(rs => {
        let data = rs.data
        let paging = data.flashSaleItemPaging
        this.remainSeconds = data.remainSeconds
        if (append) {
          this.flashSaleItemList = this.flashSaleItemList.concat(paging.results)
        } else {
          this.flashSaleItemList = paging.results
        }
        this.hasNext = paging.hasNext
      })
    },
    onXRefresh (event) {
      this.resetSearchParam()
      this.onRefresh(event, Deferred.when(this.loadData, this.search()))
    },
    platformIcon (ecomPlat) {
      return urlPath.assets('images/icon/platform/' + ecomPlat + '.png')
    },
    onLoadingMore (event) {
      this.loadingMore = true
      this.searchParam.page = this.searchParam.page + 1
      this.search(true).done(() => {
        this.loadingMore = false
      })
    },
    gotoTop () {
      dom.scrollToElement(this.$refs.top)
    },
    onPageScroll (event) {
      this.onPageScrollForScrollTop(event)
    },
    itemClick (fsi) {
      navigator.push('commission-item.js?id=' + fsi.item.id + '&flashSaleRemainSeconds=' + this.remainSeconds)
    }
  }
}
</script>
